.bevel {
  /* 折角效果 */
  /* background: #58a; /* 回退样式 */
  /* background: linear-gradient(-135deg, transparent 2em, #58a 0); */
  width: 400px;
  height: 200px;

  /* 翻页效果 */
  /* background: #58a;
  background: linear-gradient(
        to left bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 0
      )
      no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.4em, #58a 0); */

  /* 不同角度的翻页 */
  /* background: #58a;
  background: linear-gradient(
        to left bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 0
      )
      no-repeat 100% 0 / 3em 1.73em,
    linear-gradient(-150deg, transparent 1.5em, #58a 0); */
}
/* 更好看 */
.bevel {
  position: relative;
  background: #58a; /* 回退样式 */
  background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
  border-radius: 0.5em;
}
.bevel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(
      to left bottom,
      transparent 50%,
      rgba(0, 0, 0, 0.2) 0,
      rgba(0, 0, 0, 0.4)
    )
    100% 0 no-repeat;
  width: 1.73em;
  height: 3em;
  transform: translateY(-1.3em) rotate(-30deg);
  transform-origin: bottom right;
  border-bottom-left-radius: inherit;
  box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
}
